将两个canvas中的数据放在一个canvas中合成一张图片 |
您所在的位置:网站首页 › 微信小程序 图片合成 › 将两个canvas中的数据放在一个canvas中合成一张图片 |
- 当前 Bug 的表现 canvasA、canvasB,在canvasB中进行无规则裁剪操作,使用canvasToTempFilePath API把canvasB指定区域的内容导出生成指定大小的图片,将导出的图片使用drawImage API绘制到canvasA中,再使用drawImage API绘制一张图片到canvasA中,两次都使用draw(true)进行绘制,最后使用canvasToTempFilePath API把canvasA指定区域的内容导出生成指定大小的图片。 // 将裁剪画布内容保存 wx.canvasToTempFilePath({ x: 0, y: 0, width: 320, height: 320, destWidth: 320, destHeight: 320, canvasId: 'clipCanvas', success: res => { //清洗相框画布 //frameCanvas.clearRect(0, 0, 320, 320); console.log('裁剪图:'+res.tempFilePath); // 绘制裁剪图到相框画布 frameCanvas.drawImage(res.tempFilePath, 0, 0, 320, 320); frameCanvas.draw();
// 绘制相框图到相框画布 console.log('相框图:'+this.data.framePic); frameCanvas.drawImage(this.data.framePic, 0, 0, 320, 320); frameCanvas.draw(true); // 保存相框画布内容为图片 wx.canvasToTempFilePath({ x: 0, y: 0, width: 320, height: 320, destWidth: 320, destWidth: 320, canvasId: 'frameCanvas', success: res => { console.log('合成图:'+res.tempFilePath); // 关闭裁剪层,更新数据 this.setData({ clipImagePath: res.tempFilePath, isClip: false });
// 将裁剪图绘制到产品上 this.drawClipImageToGoods(); } }, this); } }, this); 真机测试iOS和Android都没有问题,开发工具有问题。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |